<!--用例维护 add by gaojingyu-->
<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" @submit.native.prevent>
        <el-form-item>
          <el-input
            clearable
            v-model="filters.script_name_zh"
            prefix-icon="el-icon-search"
            placeholder="脚本中文名"
            @keyup.enter.native="getLyzdScriptList"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="filters.script_name"
            clearable
            prefix-icon="el-icon-search"
            placeholder="脚本名称"
            @keyup.enter.native="getLyzdScriptList"
          ></el-input>
        </el-form-item>
        <el-form-item label="" label-width="83px" prop="getProjectFirstID">
          <el-select
            clearable
            v-model="filters.project_id"
            placeholder="请选择项目列表"
          >
            <el-option
              v-for="(item, index) in project"
              :key="index + ''"
              :label="item.project_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getLyzdScriptList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="scriptList"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%;"
    >
      <el-table-column type="selection" min-width="5%"> </el-table-column>
      <el-table-column
        type="index"
        align="center"
        :index="indexMethod"
        label="序号"
      />
      <el-table-column
        prop="script_name_zh"
        label="脚本中文名称"
        min-width="15%"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="script_name"
        label="脚本英文名称"
        min-width="15%"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <!-- <el-table-column prop="project" label=" 项目ID" min-width="16%" :show-overflow-tooltip="true">
            </el-table-column>-->
      <el-table-column
        prop="project_name"
        label=" 项目名称"
        min-width="15%"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="api_list"
        label=" 接口列表"
        min-width="15%"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="application_name"
        label="用途"
        min-width="15%"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <!--


            <el-table-column prop="status" label="状态" min-width="5%" >
                <template slot-scope="scope">
                    <img v-show="!scope.row.delete_flag" src="../../../../assets/icon-yes.svg"/>
                    <img v-show="scope.row.delete_flag" src="../../../../assets/icon-no.svg"/>
                </template>
            </el-table-column>


            <el-table-column label="操作" min-width="25%">
                <template slot-scope="scope">

                 <el-button  plain  type="success"  size="small" @click="handleInfo(scope.$index, scope.row)">详情</el-button>

                 <el-button type="info" size="small" @click="handleChangeStatus(scope.$index, scope.row)">{{scope.row.delete_flag===true?'启用':'禁用'}}</el-button>


                </template>
            </el-table-column>-->
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="20"
        :page-count="total"
        style="float:right;"
      >
      </el-pagination>
    </el-col>

    <el-dialog
      title="用例详情"
      :visible.sync="detailFormVisible"
      customClass="customWidth"
      :close-on-click-modal="false"
      style="width: 90%; left: 2%"
    >
      <el-table :data="details"> </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="detailFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
//import NProgress from 'nprogress'

import {
  getLyzdScript,
  getApiList,
  editStatus_case,
  getApiListByProjectID,
  getProjectList,
  test,
  //addEnvironment,delEnvironment,updateEnvironment
  //, delProject, disableProject, enableProject,
} from "../../../../api/api";

// import ElRow from "element-ui/packages/row/src/row";
export default {
  // components: {ElRow},
  data() {
    return {
      filters: {
        name: "",
      },
      inputText: "",
      detailFormVisible: false,
      limitNum: 1,
      project: [],
      scriptList: [],
      total: 0,
      page: 1,
      listLoading: false,
      uploadurl: test + "/api/api/CaseExcleImport",
      sels: [], //列表选中列
      fileList: [],
      uploadform: false,
      // getAPIFirstID=[], //getProjectFirstID:'',
      // getAPIFirstID:'',//获取接口
      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      form: {
        getProjectFirstID: "",
        getAPIFirstIDS: "",
      },
      //options: [{ label: "Web", value: "Web"}, { label: "App", value: "App"}],

      editFormRules: {
        env_name: [
          { required: true, message: "请输入环境名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],

        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { max: 255, message: "不能超过125个字符", trigger: "blur" },
        ],
      },
      //编辑界面数据
      editForm: {
        name: "",
        version: "",
        type: "",
        description: "",
      },
      templateDownload: false,
      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addFormRules: {
        env_name: [
          { required: true, message: "请输入环境名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],

        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { max: 255, message: "不能超过125个字符", trigger: "blur" },
        ],
      },
      //新增界面数据
      addForm: {
        name: "",
        version: "",
        type: "",
        description: "",
      },
    };
  },
  methods: {
    // 获取项目列表 getLyzdEnvironments getLyzdEnvironments getLyzdCaseList  interface_id
    getLyzdScriptList() {
      this.listLoading = true;
      let self = this;
      let params = {
        page: self.page,
        // interface_id: self.filters.interface_id,
        project_id: self.filters.project_id,

        script_name: self.filters.script_name,
        script_name_zh: self.filters.script_name_zh,
      };

      let headers = {
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getLyzdScript(headers, params).then((res) => {
        self.listLoading = false;
        let { msg, code, data } = res;
        if (code === "999999") {
          self.total = data.total;
          self.scriptList = data.data;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    //跳转用
    handleResult: function(index, row) {
      let case_id = row.id;
      this.$router.push({ path: "/case_edit/cid=" + case_id });
    },

    handleInfo: function(index, row) {
      this.detailFormVisible = true;
    },

    getProjects() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getProjectList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          var projectjsonArr = new Array();

          for (var i = 0; i < data.length; i++) {
            if (data[i].status == 0) {
              projectjsonArr.push(data[i]);
            }
          }

          self.project = projectjsonArr;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    // 改变项目状态
    handleChangeStatus: function(index, row) {
      let self = this;
      this.listLoading = true;
      let params = { case_id: row.id };

      let headers = {
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      editStatus_case(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        self.listLoading = false;
        if (code === "999999") {
          self.$message({
            message: msg,
            center: true,
            type: "success",
          });

          row.delete_flag = !row.delete_flag;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    handleCurrentChange(val) {
      this.page = val;
      this.getLyzdScriptList();
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    //显示新增界面
    handleAdd: function() {
      this.addFormVisible = true;
    },
    //编辑
    indexMethod(index) {
      let curpage = this.page; //单前页码，具体看组件取值

      let limitpage = 20; //每页条数，具体是组件取值

      return index + 1 + (curpage - 1) * limitpage;
    },
    editSubmit: function() {
      let self = this;
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            self.editLoading = true;
            //NProgress.start();
            let params = {
              id: self.editForm.id,
              env_name: self.editForm.env_name,
              address: self.editForm.address,
              content: self.editForm.content,
            };
            //alert(params)
            let header = {
              "Content-Type": "application/json",
              Authorization:
                "Token " + JSON.parse(sessionStorage.getItem("token")),
            };
            updateEnvironment(header, params).then((_data) => {
              let { msg, code, data } = _data;
              self.editLoading = false;
              if (code === "999999") {
                self.$message({
                  message: "修改成功",
                  center: true,
                  type: "success",
                });
                self.$refs["editForm"].resetFields();
                self.editFormVisible = false;
                self.getLyzdEnterfaceList();
              } else if (code === "999997") {
                self.$message.error({
                  message: msg,
                  center: true,
                });
              } else {
                self.$message.error({
                  message: msg,
                  center: true,
                });
              }
            });
          });
        }
      });
    },
    //新增
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let self = this;
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            self.addLoading = true;
            //NProgress.start();
            let params = JSON.stringify({
              env_name: self.addForm.env_name,
              address: self.addForm.address,
              content: self.addForm.content,
            });

            let header = {
              "Content-Type": "application/json",
              Authorization:
                "Token " + JSON.parse(sessionStorage.getItem("token")),
            };
            addEnvironment(header, params).then((_data) => {
              let { msg, code, data } = _data;
              self.addLoading = false;
              if (code === "999999") {
                self.$message({
                  message: "添加成功",
                  center: true,
                  type: "success",
                });
                self.$refs["addForm"].resetFields();
                self.addFormVisible = false;
                self.getLyzdEnterfaceList();
              } else if (code === "999997") {
                self.$message.error({
                  message: msg,
                  center: true,
                });
              } else {
                self.$message.error({
                  message: msg,
                  center: true,
                });
                self.$refs["addForm"].resetFields();
                self.addFormVisible = false;
                self.getLyzdScriptList();
              }
            });
          });
        }
      });
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
  },
  mounted() {
    this.getProjects();
    this.getLyzdScriptList();
  },
};
</script>

<style></style>
